<template>
  <div class="city_container">
      <header-top :headTitle="cityname" :goBack="true">
          <template #changecity>
              <router-link :to="'/home'" class="change_city">修改城市</router-link>
          </template>
      </header-top>
      <form class="city_form" @submit.prevent>
          <div>
              <input type="search" 
                class="city_input input_style" 
                placeholder="请输入小区/大厦/学校 地址" 
                v-model="inputVaule"
                required>
          </div>
          <div>
              <input type="submit" 
                class="city_submit input_style" 
                value="提交"
                @click="postpois">
          </div>
      </form>
      <header v-if="historytitle" class="pois_search_history">搜索历史</header>
      <ul class="getpois_ul">
          <li v-for="(item,index) in placelist" :key="index" @click="nextpage(index,item.geohash)">
              <h4 class="pois_name ellipsis">{{item.name}}</h4>
              <p class="pois_address ellipsis">{{item.address}}</p>
          </li>
      </ul>
      <footer v-if="historytitle&&placelist.length>0" class="clear_all_history" @click="clearHistory">清空历史</footer>
      <div v-if="placeNone" class="search_none_place">没有搜索到您输入的地址！</div>
  </div>
</template>

<script>
import HeaderTop from '../../components/header/HeaderTop'
import {currentCity ,searchplace} from '../../api/getData'
import {getAddrHistory,setAddrHistory,removeAddrHistory} from '../../utils/searchHistory'
import {mapActions} from 'vuex'
export default {
    components:{
        HeaderTop
    },
    data(){
        return {
            inputVaule:'', // 输入
            cityname:'', //当前城市名称
            cityid:'', // 当前城市id
            placelist:[], // 搜索的地址结果
            placeNone: false, // 搜索无结果，显示提示信息
            historytitle: true
        }
    },
    mounted(){
        this.cityid = this.$route.params.id
        currentCity(this.cityid).then(res=>{
            this.cityname=res.name
        })
        this.initData();
    },
    methods:{
        ...mapActions(['saveGeohash']),
        initData(){
            let res =getAddrHistory()
            if(res && res.length!== 0){
                this.placelist=res;
            }else{
                this.placelist=[];
            }
            
        },
        postpois(){
            if(this.inputVaule.trim().length==0){
                return;
            }
            this.resetData(); // 所有前重置列表数据
            searchplace(this.cityid,this.inputVaule).then(res=>{
                this.placelist=res;
                this.placeNone = res.length?false:true;
                this.historytitle=false;
            })
        },
        nextpage(index,geohash){
            const currentItem = this.placelist[index];
            if(!currentItem){
                return;
            }
            const res = getAddrHistory()
            const exist = res.some(item=>{
                return item.geohash === geohash
            })
            if(!exist){
                setAddrHistory(currentItem);
            }
            
            this.$router.push({path:'/msite',query:{geohash:geohash}});
            
            
        },
        clearHistory(){
            removeAddrHistory()
            this.resetData();
        },
        resetData(){
            this.placelist=[];
            this.placeNone=false;
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.city_container{
    padding-top: 2.35rem;
}
.change_city{
    @include ct;
    right: 0.4rem;
    @include sc(0.6rem,#fff);
}
.city_form{
    background: #fff;
    border-top: 1px solid $bc;
    border-bottom: 1px solid $bc;
    padding-top: 0.4rem;
    div{
        width: 90%;
        margin: 0 auto;
        text-align: center;
        .input_style{
            @include wh(100%,1.4rem);
            margin-bottom: .4rem;
            border-radius: .1rem;
        }
        .city_input{
            border: 1px solid $bc;
            padding: 0 0.4rem;
            @include sc(0.65rem,#333);
        }
        .city_submit{
            background: $blue;
             @include sc(0.65rem,#fff);
        }
    }
    
}
.pois_search_history {
    margin-top: .5rem;
    border-top: 1px solid $bc;
    border-bottom: 1px solid $bc;
    padding-left: 0.5rem;
    @include font(0.475rem, 1rem);
}
.getpois_ul{
    margin-top: .5rem;
    background: #fff;
    border-top: 1px solid $bc;
    li{
        padding-top: 0.65rem;
        border-bottom: 1px solid $bc;
        .pois_name{
            width: 90%;
            margin: 0 auto 0.35rem;
            @include sc(0.65rem,#333);
        }
        .pois_address{
            width: 90%;
            margin: 0 auto 0.55rem;
            @include sc(0.45rem,#666);
        }
    }
}
.clear_all_history{
    @include sc(0.7rem, #666);
    line-height: 2rem;
    background-color: #fff;
    text-align: center;
}
.search_none_place{
    margin: 0 auto;
    @include font(0.65rem, 1.75rem);
    color: #333;
    background-color: #fff;
    text-indent: 0.6rem;
}
</style>